<script setup lang="ts">
import dayjs from 'dayjs';
import { ref } from 'vue';
import 'dayjs/locale/zh-cn';
import Book from './Book.vue';
import Mac from './Mac.vue';

</script>

<template>
  		<div class="bookshelf">
			<div class="box">
				<div class="back"></div>
				<div class="bottom"></div>			
				<div class="left"></div>
				<div style="margin-left: 10em;">
					<Book></Book>
				</div>
				<div class="spliter1"></div>
				<div style="margin-left: 19em;">
					<Book></Book>
				</div>
				<div class="spliter2"></div>
				<div class="spliter3"></div>
				<div style="margin-left: 36em;">
					<Mac></Mac>
				</div>
				<div class="right"></div>
				<div class="front">
					<div class="name-card">
						<div class="line"></div>
						<div class="line"></div>
						<div class="line"></div>
						<div class="line"></div>
					</div>
					<div class="name-card">
						<div class="line"></div>
						<div class="line"></div>
						<div class="line"></div>
						<div class="line"></div>
					</div>
					<div class="name-card">
						<div class="line"></div>
						<div class="line"></div>
						<div class="line"></div>
						<div class="line"></div>
					</div>
				</div>
			</div>			
		</div>
		<svg width="0" height="0">  
			<defs>  
				<mask id="sideMask"  x="0" y="0" width="30em" height="25em">  
					<rect width="30em" height="25em" fill="white" />  
					<ellipse cx="19em" cy="5em" rx="1em" ry="2em" fill="black" />   
					<ellipse cx="23em" cy="5em" rx="1em" ry="2em" fill="black" />   
					<ellipse cx="27em" cy="5em" rx="1em" ry="2em" fill="black" />   

					<ellipse cx="11em" cy="10em" rx="1em" ry="2em" fill="black" />  
					<ellipse cx="15em" cy="10em" rx="1em" ry="2em" fill="black" />  
					<ellipse cx="19em" cy="10em" rx="1em" ry="2em" fill="black" />   
					<ellipse cx="23em" cy="10em" rx="1em" ry="2em" fill="black" />   
					<ellipse cx="27em" cy="10em" rx="1em" ry="2em" fill="black" />   

					<ellipse cx="3em" cy="15em" rx="1em" ry="2em" fill="black" />  
					<ellipse cx="7em" cy="15em" rx="1em" ry="2em" fill="black" />  					
					<ellipse cx="11em" cy="15em" rx="1em" ry="2em" fill="black" />  
					<ellipse cx="15em" cy="15em" rx="1em" ry="2em" fill="black" />  
					<ellipse cx="19em" cy="15em" rx="1em" ry="2em" fill="black" />   
					<ellipse cx="23em" cy="15em" rx="1em" ry="2em" fill="black" />   
					<ellipse cx="27em" cy="15em" rx="1em" ry="2em" fill="black" />   

					
					<ellipse cx="3em" cy="20em" rx="1em" ry="2em" fill="black" />  
					<ellipse cx="7em" cy="20em" rx="1em" ry="2em" fill="black" />  					
					<ellipse cx="11em" cy="20em" rx="1em" ry="2em" fill="black" />  
					<ellipse cx="15em" cy="20em" rx="1em" ry="2em" fill="black" />  
					<ellipse cx="19em" cy="20em" rx="1em" ry="2em" fill="black" />   
					<ellipse cx="23em" cy="20em" rx="1em" ry="2em" fill="black" />   
					<ellipse cx="27em" cy="20em" rx="1em" ry="2em" fill="black" />   									
				</mask>  
				<mask id="backMask"  x="0" y="0" width="40em" height="25em">  
					<rect width="40em" height="25em" fill="white" />  
					<rect x="1em"  y="2em" width="8em" height="2em" fill="black" />
					<rect x="11em" y="2em" width="8em" height="2em" fill="black" />
					<rect x="21em" y="2em" width="8em" height="2em" fill="black" />
					<rect x="31em" y="2em" width="8em" height="2em" fill="black" />
					
					<rect x="1em"  y="6em" width="8em" height="2em" fill="black" />
					<rect x="11em" y="6em" width="8em" height="2em" fill="black" />
					<rect x="21em" y="6em" width="8em" height="2em" fill="black" />
					<rect x="31em" y="6em" width="8em" height="2em" fill="black" />
					
					<rect x="1em"  y="10em" width="8em" height="2em" fill="black" />
					<rect x="11em" y="10em" width="8em" height="2em" fill="black" />
					<rect x="21em" y="10em" width="8em" height="2em" fill="black" />
					<rect x="31em" y="10em" width="8em" height="2em" fill="black" />
				
					<rect x="1em"  y="14em" width="8em" height="2em" fill="black" />
					<rect x="11em" y="14em" width="8em" height="2em" fill="black" />
					<rect x="21em" y="14em" width="8em" height="2em" fill="black" />
					<rect x="31em" y="14em" width="8em" height="2em" fill="black" />

					<rect x="1em"  y="18em" width="8em" height="2em" fill="black" />
					<rect x="11em" y="18em" width="8em" height="2em" fill="black" />
					<rect x="21em" y="18em" width="8em" height="2em" fill="black" />
					<rect x="31em" y="18em" width="8em" height="2em" fill="black" />
				</mask>  
			</defs>  
		</svg>
</template>

<style scoped>
	.bookshelf{
		/* position: relative; */
		/* width: 43em;
		height: 25em; */
		/* background-color: #1a1212; */		
		/* box-shadow: 0 0 10px rgba(0,0,0,0.3); */
		overflow: hidden;
		
		
	}
	.bookshelf .box{
	    width: 100em;
		height: 25em;
		perspective:130em;
	}
	.bookshelf .box .left{
		position:absolute;
		width: 30em;
		height: 25em;
		background-color: #474747;
		transform-origin: 0 0;
		transform: rotate3d(0,1,0,90deg);
		top: 0;
		-webkit-mask-image: url(#sideMask);
        mask-image: url(#sideMask);


		-webkit-clip-path: polygon(0 50%, 70% 0, 100% 0,100% 100%,  0 100%);  
  		clip-path: polygon(0 50%, 70% 0, 100% 0,100% 100%,  0 100%);  
		
	}
	.bookshelf .box .spliter1{
		position:absolute;
		width: 30em;
		height: 25em;
		background-color: #474747;
		transform-origin: 0 0;
		transform: rotate3d(0,1,0,90deg);
		margin-left: 10em;
		top: 0;
		
		-webkit-mask-image: url(#sideMask);
       mask-image: url(#sideMask);
	   
		-webkit-clip-path: polygon(0 50%, 70% 0, 100% 0,100% 100%,  0 100%);  
  		clip-path: polygon(0 50%, 70% 0, 100% 0,100% 100%,  0 100%);  
	}
	.bookshelf .box .spliter2{
		position:absolute;
		width: 30em;
		height: 25em;
		background-color: #474747;
		transform-origin: 0 0;
		transform: rotate3d(0,1,0,90deg);
		margin-left: 20em;
		top: 0;		

		-webkit-mask-image: url(#sideMask);
        mask-image: url(#sideMask);

		-webkit-clip-path: polygon(0 50%, 70% 0, 100% 0,100% 100%,  0 100%);  
  		clip-path: polygon(0 50%, 70% 0, 100% 0,100% 100%,  0 100%);  
	}
	.bookshelf .box .spliter3{
		position:absolute;
		width: 30em;
		height: 25em;
		background-color: #474747;
		transform-origin: 0 0;
		transform: rotate3d(0,1,0,90deg);
		margin-left: 30em;
		top: 0;		
		
		-webkit-mask-image: url(#sideMask);
        mask-image: url(#sideMask);
		-webkit-clip-path: polygon(0 50%, 70% 0, 100% 0,100% 100%,  0 100%);  
  		clip-path: polygon(0 50%, 70% 0, 100% 0,100% 100%,  0 100%);  
	}
	.bookshelf .box .right{
		position:absolute;
		width: 30em;
		height: 25em;
		background-color: #474747;
		transform-origin: 0 0;
		transform: rotate3d(0,1,0,90deg) ;
		margin-left: 40em;
		top: 0;
		
		-webkit-mask-image: url(#sideMask);
        mask-image: url(#sideMask);

		-webkit-clip-path: polygon(0 50%, 70% 0, 100% 0,100% 100%,  0 100%);  
  		clip-path: polygon(0 50%, 70% 0, 100% 0,100% 100%,  0 100%);  
	}
	.bookshelf .box .bottom{
		width: 40em;
		height: 30em;
		background-color: #515151;
		border-radius: 1em;
		position: absolute;
		bottom: 0;
		transform-origin: 100% 100%;
		transform: rotate3d(1,0,0,90deg);
	}
	.bookshelf .box .back{
		width: 40em;
		height: 28em;
		background-color: #767272;
		/* border-radius: 20px; */
		transform: translateZ(-30em);

		
		-webkit-mask-image: url(#backMask);
        mask-image: url(#backMask);
		
	}
	.bookshelf .box .front{
		width: 40em;
		height: 8em;
		background-color: #515151;
		box-shadow: 0 0 1em rgba(0,0,0,0.8);
		
		position: absolute;
		bottom: 0;
		display:flex;
	}
	.bookshelf .box .front .name-card{ 
		width: 9em;
		height: 4em;
		background-color: #bebdbd;
		margin: 2em;
		border-radius: 1em;

		display: flex;
		flex-direction: column;
	}
	.bookshelf .box .front .name-card .line{ 
		width: 6em;
		height: 0.01em;
		margin:auto;
		background-color: rgb(187, 185, 185);
	}
	
	
</style>